<template>
	<view class="cert-card" :style="{
		height: height + 'rpx',
		minHeight: height + 'rpx',
	}">
		<image :src="certInfo.img" class="_img" :style="{
			height: height + 'rpx',
			minHeight: height + 'rpx',
			width: width
		}" @click="lookImage(certInfo.img)" mode="aspectFill"></image>
		<view class="_name">
			<view class="u-p-12 f-s-12 u-line-1">{{ certInfo.name }}</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		certInfo: Object,
		height: {
			type: Number,
			default: 240
		},
		width: {
			type: String,
			default: '100%'
		},
	})
	const lookImage = (img) => {
		uni.previewImage({
			urls: [img]
		});
	}
</script>

<style lang="scss" scoped>
	.cert-card {
		position: relative;

		._img {
			border-radius: 4px;
			display: block;
		}

		._name {
			position: absolute;
			bottom: 0;
			color: #fff;
		}
	}
</style>